<template>
  <div id="all">
    <header>
      <van-icon name="arrow-left" color="#000" size="24" @click="$router.back()" />
      <div class="title">想看列表</div>
    </header>
    <div v-if="wantwatchList.length > 0">
      <div
        class="a1"
        v-for="film in wantwatchList"
        :key="film.id"
        @click="filmDetails(film.id)"
      >
        <div class="a1a">
          <img :src="film?.img" alt="" />
        </div>
        <div class="a1b">
          <h3>{{ film?.nm }}</h3>
          <div class="a1ba">
            <p>{{ film?.enm }}</p>
            <p>{{ film?.cat?.split(",").join(" / ") }}</p>
            <p>{{ film?.star?.split(",").join(" / ") }}</p>
            <p>
              {{ film?.pubDesc }} /
              <span>
                {{
                  film?.episodeDur !== 0 ? `${film?.episodeDur}分钟` : `${film?.dur}分钟`
                }}
              </span>
            </p>
          </div>
          <div class="a1c">
            <p v-if="film?.sc">{{ film?.scoreLabel }} <span>{{ film?.sc }}</span> </p>
            <p v-else>暂无评分</p>
          </div>
        </div>
      </div>
    </div>
    <van-empty v-else description="暂无想看的电影" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const wantwatchList = ref([]); // 用来存储想看列表

// 页面加载时就获取想看列表
onMounted(() => {
  getWantwatchList();
});

// 获取想看列表的函数
const getWantwatchList = () => {
  const token = JSON.parse(localStorage.getItem("token")); // 获取 token
  const users = JSON.parse(localStorage.getItem("users")) || []; // 获取用户列表
  // console.log(666);

  if (token) {
    const username = token; // 假设 token 存储的是用户名
    // 在 users 数组中查找匹配的用户
    const user = users.find((user) => user.username === username);

    if (user && Array.isArray(user.wantwatch)) {
      wantwatchList.value = user.wantwatch; // 将获取到的列表赋值给响应式变量
      // console.log("想看列表:", wantwatchList.value); // 可以在这里查看列表
    } else {
      // console.log("用户的想看列表为空或不存在");
      wantwatchList.value = []; // 如果没有找到用户的 wantwatch 或者它不是一个数组，返回空数组
    }
  } else {
    console.log("未登录");
    wantwatchList.value = []; // 未登录时返回空数组
  }
};
import { useRouter } from "vue-router";
const router = useRouter();
const filmDetails = (movie) => {
  router.push({
    path: "/fil",
    query: {
      movieId: movie,
    },
  });
};
</script>

<style lang="less" scoped>



#all {
  // background: linear-gradient(to bottom, #ea003d, #fff);
  // height: 100vh;
}
header {
  display: flex;
  align-items: center;
  padding: 12rem 6rem;

  .title {
    width: 90%;
    text-align: center;
    font-size: 14rem;
    font-weight: bold;
  }
}
.a1 {
  width: 345rem;
  height: 160rem;
  margin: 0 auto;
  display: flex;
  padding: 10rem;
  margin: 10rem;
  box-sizing: border-box;
  .a1a {
    position: relative;

    img {
      width: 100rem;
      height: auto;
    }

    .van-icon {
      width: 30rem;
      height: 30rem;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      text-align: center;
      line-height: 30rem;
      font-size: 16rem;
      color: #eceded;
      position: absolute;
      top: 85%;
      left: 5%;
    }
  }

  .a1b {
    height: 100% !important;
    flex-grow: 1;
    margin-left: 0.24rem;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10rem;

    h3 {
      width: 221rem;
      font-size: 20rem;
      font-weight: 700;
      margin: 0;
      display: -webkit-box; /* 必须，启用块级布局 */
      -webkit-box-orient: vertical; /* 必须，设置布局为垂直方向 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
      -webkit-line-clamp: 1; /* 限制显示行数 */
      line-height: 1.5; /* 设置每行的行高 */
      text-align: justify; /* 设置文本左右对齐 */
    }

    .a1ba {
      display: flex;
      flex-direction: column;

      p {
        font-size: 12rem;
        color: #a9b2b3;
        margin: 0;
        display: -webkit-box; /* 必须，启用块级布局 */
        -webkit-box-orient: vertical; /* 必须，设置布局为垂直方向 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
        -webkit-line-clamp: 1; /* 限制显示行数 */
        line-height: 1.5; /* 设置每行的行高 */
        text-align: justify; /* 设置文本左右对齐 */
      }
    }
  }

  .a1c {
    width: 117rem;
    height: 30rem;
    p{
      font-size: 12rem;
      color: #a9b2b3;
      line-height: 40rem
    }
    
    }
  }



  p{
    margin: 0
  }

</style>
